<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置 - 声破天音乐</title>
    <link rel="stylesheet" href="assets/css/main.css">
    <link rel="stylesheet" href="assets/css/settings.css">
    <link rel="stylesheet" href="assets/css/player-bar.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>

<body>
    <div class="main-container">
        <!-- 侧边导航栏 -->
        <aside class="sidebar">
            <div class="logo">
                <a href="landing.html">
                    <svg viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="25" cy="25" r="20" fill="#1DB954" />
                        <path d="M18 27.5C18 27.5 22 23.5 25 23.5C28 23.5 32 27.5 32 27.5" stroke="black"
                            stroke-width="2" fill="none" />
                        <path d="M16 21.5C16 21.5 22 15.5 25 15.5C28 15.5 34 21.5 34 21.5" stroke="black"
                            stroke-width="2" fill="none" />
                        <path d="M14 15.5C14 15.5 21 7.5 25 7.5C29 7.5 36 15.5 36 15.5" stroke="black" stroke-width="2"
                            fill="none" />
                        <text x="50" y="32" font-family="Arial, sans-serif" font-size="24" font-weight="bold"
                            fill="white">声破天</text>
                    </svg>
                </a>
            </div>
            <nav class="main-nav">
                <ul>
                    <li class="nav-item">
                        <a href="index.html"><i class="fas fa-home"></i> <span data-i18n="nav_home">首页</span></a>
                    </li>
                    <li class="nav-item">
                        <a href="search.html"><i class="fas fa-search"></i> <span data-i18n="nav_search">搜索</span></a>
                    </li>
                    <li class="nav-item">
                        <a href="explore.html"><i class="fas fa-compass"></i> <span
                                data-i18n="nav_explore">探索</span></a>
                    </li>
                    <li class="nav-item">
                        <a href="library.html"><i class="fas fa-book"></i> <span data-i18n="nav_library">音乐库</span></a>
                    </li>
                </ul>
            </nav>

            <div class="library-nav">
                <div class="library-header">
                    <h2><i class="fas fa-plus-square"></i> <span data-i18n="create_playlist">创建播放列表</span></h2>
                </div>
                <div class="library-items">
                    <div class="library-item">
                        <div class="liked-songs">
                            <div class="liked-gradient">
                                <i class="fas fa-heart"></i>
                            </div>
                            <h3 data-i18n="liked_songs">我喜欢的歌曲</h3>
                            <p><span data-i18n="playlist">播放列表</span> • 32 <span data-i18n="songs">首歌曲</span></p>
                        </div>
                    </div>
                    <div class="playlists">
                        <div class="playlist-item">
                            <a href="#" id="following-link" style="text-decoration: none; color: inherit;">
                                <h3 data-i18n="playlist_1">我的关注</h3>
                                <p data-i18n="playlist_by_user">播放列表 • 用户</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </aside>

        <!-- 主内容区 -->
        <main class="content">
            <header class="top-bar visible">
                <div class="navigation-buttons">
                    <button class="nav-btn"><i class="fas fa-chevron-left"></i></button>
                    <button class="nav-btn"><i class="fas fa-chevron-right"></i></button>
                </div>
                <div class="user-menu">
                    <div class="language-selector">
                        <div class="language-options">
                            <button class="language-btn" data-lang="zh-CN">简体中文</button>
                            <button class="language-btn" data-lang="en">English</button>
                            <button class="language-btn" data-lang="zh-TW">繁體中文</button>
                        </div>
                    </div>
                    <div class="auth-buttons">
                        <a href="login.html" class="login-btn"><i class="fas fa-sign-in-alt"></i> <span
                                data-i18n="login">登录</span></a>
                        <a href="register.html" class="register-btn"><i class="fas fa-user-plus"></i> <span
                                data-i18n="register">注册</span></a>
                    </div>
                </div>
            </header>

            <!-- 设置页面内容 -->
            <div class="content-container settings-container">
                <div class="settings-header">
                    <h1 class="settings-title">设置</h1>
                    <p class="settings-description">管理您的账户和偏好设置</p>
                </div>

                <div class="settings-layout">
                    <!-- 设置导航栏 -->
                    <div class="settings-sidebar">
                        <ul class="settings-nav">
                            <li class="settings-nav-item active" data-section="account">
                                <i class="fas fa-user"></i> 账户
                            </li>
                            <li class="settings-nav-item" data-section="profile">
                                <i class="fas fa-id-card"></i> 个人资料
                            </li>
                            <li class="settings-nav-item" data-section="privacy">
                                <i class="fas fa-shield-alt"></i> 隐私设置
                            </li>
                            <li class="settings-nav-item" data-section="playback">
                                <i class="fas fa-music"></i> 播放设置
                            </li>
                            <li class="settings-nav-item" data-section="notification">
                                <i class="fas fa-bell"></i> 通知
                            </li>
                            <li class="settings-nav-item" data-section="devices">
                                <i class="fas fa-laptop"></i> 应用与设备
                            </li>
                        </ul>
                    </div>

                    <!-- 设置内容区 -->
                    <div class="settings-content">
                        <!-- 账户设置 -->
                        <div class="settings-section active" id="account-section">
                            <h2 class="section-title">账户设置</h2>

                            <div class="settings-card">
                                <div class="settings-card-header">
                                    <h3>个人信息</h3>
                                </div>
                                <div class="settings-card-content">
                                    <div class="form-group">
                                        <label for="email">电子邮箱</label>
                                        <input type="email" id="email" value="user@example.com" disabled>
                                        <button class="edit-btn"><i class="fas fa-pen"></i> 修改</button>
                                    </div>

                                    <div class="form-group">
                                        <label for="password">密码</label>
                                        <input type="password" id="password" value="********" disabled>
                                        <button class="edit-btn"><i class="fas fa-pen"></i> 修改</button>
                                    </div>

                                    <div class="form-group">
                                        <label for="mobile">手机号码</label>
                                        <input type="text" id="mobile" value="138****5678" disabled>
                                        <button class="edit-btn"><i class="fas fa-pen"></i> 修改</button>
                                    </div>
                                </div>
                            </div>

                            <div class="settings-card">
                                <div class="settings-card-header">
                                    <h3>会员信息</h3>
                                </div>
                                <div class="settings-card-content">
                                    <div class="membership-info">
                                        <div class="membership-status">
                                            <span class="status-badge free">免费用户</span>
                                            <p>您当前使用的是免费账户</p>
                                        </div>
                                        <button class="premium-btn">升级至高级会员</button>
                                    </div>
                                </div>
                            </div>

                            <div class="settings-card">
                                <div class="settings-card-header">
                                    <h3>账户安全</h3>
                                </div>
                                <div class="settings-card-content">
                                    <div class="form-group toggle-group">
                                        <div class="toggle-label-container">
                                            <label>双重验证</label>
                                            <p class="description">增强账户安全，登录时需要额外验证</p>
                                        </div>
                                        <div class="toggle-switch">
                                            <input type="checkbox" id="two-factor" class="toggle-input">
                                            <label for="two-factor" class="toggle-switch-label"></label>
                                        </div>
                                    </div>

                                    <div class="form-group toggle-group">
                                        <div class="toggle-label-container">
                                            <label>登录通知</label>
                                            <p class="description">在新设备上登录时接收通知</p>
                                        </div>
                                        <div class="toggle-switch">
                                            <input type="checkbox" id="login-notification" class="toggle-input" checked>
                                            <label for="login-notification" class="toggle-switch-label"></label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="settings-card danger-zone">
                                <div class="settings-card-header">
                                    <h3>危险区域</h3>
                                </div>
                                <div class="settings-card-content">
                                    <button class="danger-btn"><i class="fas fa-trash"></i> 删除账户</button>
                                    <p class="warning-text">删除账户后，您的所有数据将被永久删除，且无法恢复。</p>
                                </div>
                            </div>
                        </div>

                        <!-- 其他设置板块 (默认隐藏) -->
                        <div class="settings-section" id="profile-section">
                            <h2 class="section-title">个人资料设置</h2>
                            <div class="settings-card">
                                <div class="settings-card-header">
                                    <h3>基本信息</h3>
                                </div>
                                <div class="settings-card-content">
                                    <div class="profile-avatar">
                                        <div class="avatar-preview">
                                            <img src="./assets/images/avatar/default.png" alt="用户头像">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="username">用户名</label>
                                        <input type="text" id="username" value="音乐爱好者">
                                    </div>

                                    <div class="form-group">
                                        <label for="bio">个人简介</label>
                                        <textarea id="bio" rows="3" placeholder="介绍一下自己..."></textarea>
                                    </div>

                                    <div class="form-group">
                                        <label for="location">所在地</label>
                                        <input type="text" id="location" placeholder="添加所在城市">
                                    </div>

                                    <div class="form-actions">
                                        <button class="save-btn">保存更改</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="settings-section" id="privacy-section">
                            <h2 class="section-title">隐私设置</h2>
                            <div class="settings-card">
                                <div class="settings-card-header">
                                    <h3>社交隐私</h3>
                                </div>
                                <div class="settings-card-content">
                                    <div class="form-group toggle-group">
                                        <div class="toggle-label-container">
                                            <label>公开个人资料</label>
                                            <p class="description">允许其他人查看您的个人资料和播放列表</p>
                                        </div>
                                        <div class="toggle-switch">
                                            <input type="checkbox" id="public-profile" class="toggle-input" checked>
                                            <label for="public-profile" class="toggle-switch-label"></label>
                                        </div>
                                    </div>

                                    <div class="form-group toggle-group">
                                        <div class="toggle-label-container">
                                            <label>分享收听活动</label>
                                            <p class="description">显示您正在收听的内容给关注者</p>
                                        </div>
                                        <div class="toggle-switch">
                                            <input type="checkbox" id="share-listening" class="toggle-input" checked>
                                            <label for="share-listening" class="toggle-switch-label"></label>
                                        </div>
                                    </div>

                                    <div class="form-group toggle-group">
                                        <div class="toggle-label-container">
                                            <label>允许被搜索</label>
                                            <p class="description">让其他用户可以通过邮箱或用户名找到您</p>
                                        </div>
                                        <div class="toggle-switch">
                                            <input type="checkbox" id="allow-search" class="toggle-input" checked>
                                            <label for="allow-search" class="toggle-switch-label"></label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="settings-card">
                                <div class="settings-card-header">
                                    <h3>数据隐私</h3>
                                </div>
                                <div class="settings-card-content">
                                    <div class="form-group toggle-group">
                                        <div class="toggle-label-container">
                                            <label>个性化推荐</label>
                                            <p class="description">使用您的收听习惯提供个性化推荐</p>
                                        </div>
                                        <div class="toggle-switch">
                                            <input type="checkbox" id="personalized-recommendations"
                                                class="toggle-input" checked>
                                            <label for="personalized-recommendations"
                                                class="toggle-switch-label"></label>
                                        </div>
                                    </div>

                                    <div class="form-group toggle-group">
                                        <div class="toggle-label-container">
                                            <label>收集使用数据</label>
                                            <p class="description">收集使用数据以改进服务</p>
                                        </div>
                                        <div class="toggle-switch">
                                            <input type="checkbox" id="collect-data" class="toggle-input" checked>
                                            <label for="collect-data" class="toggle-switch-label"></label>
                                        </div>
                                    </div>

                                    <div class="form-actions">
                                        <button class="outline-btn">下载我的数据</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="settings-section" id="playback-section">
                            <h2 class="section-title">播放设置</h2>
                            <div class="settings-card">
                                <div class="settings-card-header">
                                    <h3>音频质量</h3>
                                </div>
                                <div class="settings-card-content">
                                    <div class="form-group">
                                        <label>流媒体质量</label>
                                        <select id="streaming-quality">
                                            <option value="auto">自动（基于网络）</option>
                                            <option value="low">低（96kbps）</option>
                                            <option value="medium" selected>中（256kbps）</option>
                                            <option value="high">高（320kbps）</option>
                                            <option value="lossless" disabled>无损（仅限高级会员）</option>
                                        </select>
                                        <p class="description">较高的音质消耗更多流量</p>
                                    </div>

                                    <div class="form-group toggle-group">
                                        <div class="toggle-label-container">
                                            <label>自动调整音质</label>
                                            <p class="description">根据您的网络状况自动调整音质</p>
                                        </div>
                                        <div class="toggle-switch">
                                            <input type="checkbox" id="auto-adjust" class="toggle-input" checked>
                                            <label for="auto-adjust" class="toggle-switch-label"></label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="settings-card">
                                <div class="settings-card-header">
                                    <h3>播放控制</h3>
                                </div>
                                <div class="settings-card-content">
                                    <div class="form-group toggle-group">
                                        <div class="toggle-label-container">
                                            <label>自动播放</label>
                                            <p class="description">打开应用时自动继续播放上次的歌曲</p>
                                        </div>
                                        <div class="toggle-switch">
                                            <input type="checkbox" id="autoplay" class="toggle-input">
                                            <label for="autoplay" class="toggle-switch-label"></label>
                                        </div>
                                    </div>

                                    <div class="form-group toggle-group">
                                        <div class="toggle-label-container">
                                            <label>无缝播放</label>
                                            <p class="description">歌曲之间无缝过渡</p>
                                        </div>
                                        <div class="toggle-switch">
                                            <input type="checkbox" id="gapless" class="toggle-input" checked>
                                            <label for="gapless" class="toggle-switch-label"></label>
                                        </div>
                                    </div>

                                    <div class="form-group toggle-group">
                                        <div class="toggle-label-container">
                                            <label>音量均衡</label>
                                            <p class="description">使所有歌曲的音量保持一致</p>
                                        </div>
                                        <div class="toggle-switch">
                                            <input type="checkbox" id="normalize" class="toggle-input" checked>
                                            <label for="normalize" class="toggle-switch-label"></label>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label>交叉淡入淡出</label>
                                        <div class="range-control">
                                            <input type="range" id="crossfade" min="0" max="12" value="0">
                                            <div class="range-labels">
                                                <span>关闭</span>
                                                <span>12秒</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="settings-section" id="notification-section">
                            <h2 class="section-title">通知设置</h2>
                            <div class="settings-card">
                                <div class="settings-card-header">
                                    <h3>应用内通知</h3>
                                </div>
                                <div class="settings-card-content">
                                    <div class="form-group toggle-group">
                                        <div class="toggle-label-container">
                                            <label>新音乐发布</label>
                                            <p class="description">您关注的艺术家发布新歌曲或专辑</p>
                                        </div>
                                        <div class="toggle-switch">
                                            <input type="checkbox" id="new-music" class="toggle-input" checked>
                                            <label for="new-music" class="toggle-switch-label"></label>
                                        </div>
                                    </div>

                                    <div class="form-group toggle-group">
                                        <div class="toggle-label-container">
                                            <label>演出信息</label>
                                            <p class="description">您关注的艺术家宣布演出</p>
                                        </div>
                                        <div class="toggle-switch">
                                            <input type="checkbox" id="concerts" class="toggle-input" checked>
                                            <label for="concerts" class="toggle-switch-label"></label>
                                        </div>
                                    </div>

                                    <div class="form-group toggle-group">
                                        <div class="toggle-label-container">
                                            <label>播放列表更新</label>
                                            <p class="description">您关注的播放列表有更新</p>
                                        </div>
                                        <div class="toggle-switch">
                                            <input type="checkbox" id="playlist-updates" class="toggle-input" checked>
                                            <label for="playlist-updates" class="toggle-switch-label"></label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="settings-card">
                                <div class="settings-card-header">
                                    <h3>邮件通知</h3>
                                </div>
                                <div class="settings-card-content">
                                    <div class="form-group toggle-group">
                                        <div class="toggle-label-container">
                                            <label>产品更新</label>
                                            <p class="description">关于新功能和改进的通知</p>
                                        </div>
                                        <div class="toggle-switch">
                                            <input type="checkbox" id="product-updates" class="toggle-input" checked>
                                            <label for="product-updates" class="toggle-switch-label"></label>
                                        </div>
                                    </div>

                                    <div class="form-group toggle-group">
                                        <div class="toggle-label-container">
                                            <label>促销信息</label>
                                            <p class="description">特别优惠和促销活动</p>
                                        </div>
                                        <div class="toggle-switch">
                                            <input type="checkbox" id="promotions" class="toggle-input">
                                            <label for="promotions" class="toggle-switch-label"></label>
                                        </div>
                                    </div>

                                    <div class="form-group toggle-group">
                                        <div class="toggle-label-container">
                                            <label>调查问卷</label>
                                            <p class="description">参与用户调查以改进我们的服务</p>
                                        </div>
                                        <div class="toggle-switch">
                                            <input type="checkbox" id="surveys" class="toggle-input">
                                            <label for="surveys" class="toggle-switch-label"></label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="settings-section" id="devices-section">
                            <h2 class="section-title">应用与设备</h2>
                            <!-- 这里添加设备设置内容 -->
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- 底部播放器 -->
    <footer class="player-bar">
        <div class="now-playing">
            <div class="track-info">
                <div class="track-image" title="点击查看歌词">
                    <img src="assets/images/covers/cover2.jpg" alt="当前播放歌曲">
                </div>
                <div class="track-details">
                    <h4 class="track-name">当前</h4>
                    <p class="artist-name">晴天 - 周杰伦</p>
                </div>
            </div>
            <div class="track-actions">
                <button class="action-btn"><i class="far fa-heart"></i></button>
                <button class="action-btn"><i class="fas fa-external-link-alt"></i></button>
            </div>
        </div>

        <div class="player-controls">
            <div class="control-buttons">
                <button class="control-btn"><i class="fas fa-random"></i></button>
                <button class="control-btn"><i class="fas fa-step-backward"></i></button>
                <button class="play-btn"><i class="fas fa-play"></i></button>
                <button class="control-btn"><i class="fas fa-step-forward"></i></button>
                <button class="control-btn"><i class="fas fa-redo"></i></button>
            </div>
            <div class="playback-bar">
                <span class="current-time">0:00</span>
                <div class="progress-bar">
                    <div class="progress"></div>
                    <div class="progress-handle"></div>
                </div>
                <span class="total-time">4:29</span>
            </div>
        </div>

        <div class="player-options">
            <button class="option-btn"><i class="fas fa-list"></i></button>
            <button class="option-btn"><i class="fas fa-desktop"></i></button>
            <div class="volume-control">
                <button class="option-btn"><i class="fas fa-volume-up"></i></button>
                <div class="volume-bar">
                    <div class="volume-level"></div>
                    <div class="volume-handle"></div>
                </div>
            </div>
        </div>
    </footer>

    <!-- 添加必要的脚本文件 -->
    <script src="assets/js/i18n.js"></script>
    <script src="assets/js/app.js"></script>
    <script src="assets/js/player.js"></script>
    <script src="assets/js/navigation.js"></script>
    <script src="assets/js/settings.js"></script>
</body>

</html>